<template>
  <div :class="['commentbox',{'show':show}]">
    <div class="topbox">
      <div class="left" @click.stop="hidecommentlist">
        <i class="iconfont icon-zuo"></i>
      </div>
      <div class="center">评论({{sum}})</div>
      <div class="right">
        <i class="iconfont icon-fenxiang"></i>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <div class="cdbox">
          <img src="../assets/imgs/cd1.png" alt />
          <div class="imgbox">
            <img :src="musiccomment.picUrl" alt />
          </div>
        </div>
        <div class="songname">{{musiccomment.name}}</div>
        <div>&nbsp;-&nbsp;</div>
        <div class="sigername">{{musiccomment.singername}}</div>
      </div>
      <div class="commentdetail">
        <div class="detailtop">
          <div>评论区</div>
          <div class="detailtopright">
            <div :class="{'con':commentSortType==1}" @click.stop="change(1)">推荐</div>
            <div>&nbsp;|&nbsp;</div>
            <div :class="{'con':commentSortType==2}" @click.stop="change(2)">最热</div>
            <div>&nbsp;|&nbsp;</div>
            <div :class="{'con':commentSortType==3}" @click.stop="change(3)">最新</div>
          </div>
        </div>
        <van-list class="personcomment" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="mainbox" v-for="(ele,index) in commentlist" :key="index">
            <div class="imgbox" v-if="ele.user">
              <img :src="ele.user.avatarUrl" alt />
            </div>
            <div class="namebox" v-if="ele.user">
              <div>{{ele.user.nickname}}</div>
              <div class="date">{{ele.timeStr}}</div>
              <div class="text">{{ele.content}}</div>
              <div class="reply" v-if="ele.showFloorComment.replyCount!=0">
                {{ele.showFloorComment.replyCount}}条回复
                <i class="iconfont icon-you"></i>
              </div>
            </div>
            <div class="likebox">
              <div>{{ele.likedCount}}</div>
              <div class="icon" @click.stop="like(index,ele.commentId)">
                <i :class="['iconfont',{'icon-dianzan1':ele.liked}]"></i>
                <i :class="['iconfont',{'icon-dianzan':!ele.liked}] "></i>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <div class="mycomment">
      <input type="text" placeholder="加#科普一下#更易上热评" @keypress.13="sendcomment" v-model="mycomment" />
    </div>
  </div>
</template>

<script>
import { getNewSongComment } from "../assets/api/comment.js";
import { addlikeComment } from "../assets/api/comment.js";
import { sendComment } from "../assets/api/comment.js";
export default {
  props: ["sum", "musiccomment", "show"],
  data() {
    return {
      commentlist: [],
      commentSortType: 1,
      offset: 1,
      cursor: 0,
      loading: false,
      finished: false,
      mycomment: "",
      map: new Map(),
    };
  },
  methods: {
    //发送评论
    sendcomment() {
      sendComment({
        t: 1,
        type: 0,
        id: this.musiccomment.id,
        content: this.mycomment,
      });
      this.mycomment = "";
    },
    like(index, id) {
      if (this.commentlist[index].liked == false) {
        this.$set(this.commentlist[index], "liked", true);
        this.$set(
          this.commentlist[index],
          "likedCount",
          this.commentlist[index].likedCount + 1
        );
        this.map.set(index, [1, id]);
      } else {
        this.$set(this.commentlist[index], "liked", false);
        this.$set(
          this.commentlist[index],
          "likedCount",
          this.commentlist[index].likedCount - 1
        );
        this.map.set(index, [0, id]);
      }
    },
    hidecommentlist() {
      this.$emit("hidecommentlistson");
      this.likecomment = [];
      for (let key of this.map) {
        console.log(key[1][0]);
        console.log(key[1][1]);
        console.log(this.musiccomment.id);
        addlikeComment({
          id: this.musiccomment.id,
          cid: key[1][1],
          t: key[1][0],
          type: "0",
        }).then((data) => {
          console.log(data);
        });
      }
      this.map = new Map();
    },
    change(type) {
      for (let key of this.map) {
        console.log(key[1][0]);
        console.log(key[1][1]);
        console.log(this.musiccomment.id);
        addlikeComment({
          id: this.musiccomment.id,
          cid: key[1][1],
          t: key[1][0],
          type: "0",
        }).then((data) => {
          console.log(data);
        });
      }
      this.map = new Map();
      this.commentSortType = type;
      this.commentlist = [];
      this.offset = 1;
      this.finished = false;
      this.onLoad();
    },
    onLoad() {
      if (this.commentSortType == 1) {
        getNewSongComment({
          id: this.musiccomment.id,
          type: 0,
          pageNo: this.offset,
          sortType: this.commentSortType,
        }).then((data) => {
          if (data.data) {
            this.commentlist.push(...data.data.comments);
          }
          this.loading = false;
          if (this.commentlist.length >= data.totalCount) {
            this.finished = true;
          }
        });
      } else if (this.commentSortType == 2) {
        if (this.offset == 1) {
          getNewSongComment({
            id: this.musiccomment.id,
            type: 0,
            pageNo: this.offset,
            sortType: this.commentSortType,
          }).then((data) => {
            if (data.data) {
              this.commentlist.push(...data.data.comments);
            }
            this.loading = false;
            this.finished = true;
          });
        }
      } else if (this.commentSortType == 3) {
        if (this.offset == 1) {
          getNewSongComment({
            id: this.musiccomment.id,
            type: 0,
            pageNo: this.offset,
            sortType: this.commentSortType,
          }).then((data) => {
            if (data.data) {
              this.commentlist.push(...data.data.comments);
            }
            this.loading = false;
            if (this.commentlist.length >= data.totalCount) {
              this.finished = true;
            }
            this.cursor = data.data.cursor;
          });
        } else {
          getNewSongComment({
            id: this.musiccomment.id,
            type: 0,
            pageNo: this.offset,
            sortType: this.commentSortType,
            cursor: this.cursor,
          }).then((data) => {
            if (data.data) {
              this.commentlist.push(...data.data.comments);
            }
            this.loading = false;
            if (this.commentlist.length >= data.totalCount) {
              this.finished = true;
            }
            this.cursor = data.data.cursor;
          });
        }
      }
      this.offset += 1;
    },
  },
  filters: {
    commentshow(v) {
      return (v =
        parseInt(v) < 1000
          ? v
          : parseInt(v) < 10000
          ? "999+"
          : parseInt(v) < 100000
          ? "1w+"
          : "10w+");
    },
  },
  watch: {
    musiccomment() {
      this.commentlist = [];
      this.offset = 1;
      this.finished = false;
      this.onLoad();
    },
  },
  created() {
    this.onLoad();
  },
};
</script>

<style lang="less">
.commentbox {
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: scroll;
  z-index: 400;
  transition: all 0.3s ease-in-out;
  &.show {
    top: 0;
    &::before {
      top: 0;
    }
    .mycomment {
      bottom: 0;
    }
  }
  &::before {
    transition: all 0.3s ease-in-out;
    content: " ";
    z-index: -1;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    filter: blur(1.5px);
    background: url(../assets/imgs/bg.jpg) rgba(0, 0, 0, 0.3) center 0 no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
  }
  .topbox {
    height: 60px;
    backdrop-filter: blur(15px);
    background-color: rgba(255, 255, 255, 0.01);
    background-blend-mode: multiply;
    line-height: 60px;
    display: flex;
    color: white;
    padding: 0 16px;
    .left,
    .right {
      flex: 0 0 22px;
      i {
        font-size: 22px;
      }
    }
    .center {
      flex: 1;
      text-align: center;
    }
  }
  .content {
    .top {
      padding: 0 16px;
      display: flex;
      height: 61px;
      background-color: rgba(255, 255, 255, 0.08);
      align-items: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
      .cdbox {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
        }
        .imgbox {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
          top: 0;
          transform: scale(0.7);
        }
      }
      .songname {
        margin-left: 8px;
        color: rgba(255, 255, 255, 0.9);
      }
    }
    .commentdetail {
      background-color: rgba(255, 255, 255, 0.08);
      padding: 14px 16px;
      margin-top: 8px;
      color: rgba(255, 255, 255, 0.9);
      padding-bottom: 80px;
      .detailtop {
        display: flex;
        justify-content: space-between;
        .detailtopright {
          color: rgba(255, 255, 255, 0.5);
          display: flex;
          .con {
            color: rgba(255, 255, 255, 0.9);
          }
        }
      }
      .personcomment {
        box-sizing: border-box;
        padding: 10px 0px 15px;
        .mainbox {
          display: flex;
          padding-bottom: 16px;
          padding-top: 12px;
          position: relative;
          &::after {
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            width: 88%;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.1);
          }
          //   align-items: center;
          .imgbox {
            flex: 0 0 36px;
            width: 36px;
            height: 36px;
            border-radius: 100%;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          .namebox {
            flex: 1;
            margin-left: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            .date {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.5);
            }
            .text {
              margin: 12px 0;
              font-size: 14px;
              letter-spacing: 1px;
            }
            .reply {
              color: #74b4da;
              font-size: 13px;
            }
          }
          .likebox {
            display: flex;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            height: 36px;
            line-height: 36px;
            div {
              height: 100%;
            }
            .icon {
              margin-left: 6px;
              line-height: 33px;
            }
          }
        }
      }
    }
  }
  .mycomment {
    transition: all 0.3s ease-in-out;
    position: fixed;
    width: 100%;
    height: 80px;
    backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.1);
    background-blend-mode: multiply;
    bottom: -80px;
    left: 0;
    padding: 6px 15px 0px 15px;
    box-sizing: border-box;
    input {
      border: 0;
      background: none;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.1);
      width: 100%;
      border-radius: 1000px;
      box-sizing: border-box;
      padding: 12px 18px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      &::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.4);
      }
    }
  }
}
</style>